import { Button, Card, Col, Pagination, Row, Space, Table, Tag, Tree } from 'antd'
import { ColumnsType } from 'antd/lib/table';
import React from 'react'

export default function HospitalSchedule() {
    const columns:ColumnsType<any> = [
        {
            title:'序号'
        },
        {
            title:'职称'
        },
        {
            title:'号源时间'
        },
        {
            title:'总预约数'
        },
        {
            title:'剩余预约数'
        },
        {
            title:'挂号费(元)'
        },
        {
            title:'擅长技能'
        }
    ]
    const treeData = [
        {
            title: 'parent 1',
            key: '0-0',
            children: [
                {
                    title: 'parent 1-0',
                    key: '0-0-0',
                    disabled: true,
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-0-0',
                            disableCheckbox: true,
                        },
                        {
                            title: 'leaf',
                            key: '0-0-0-1',
                        },
                    ],
                },
                {
                    title: 'parent 1-1',
                    key: '0-0-1',
                    children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],
                },
            ],
        },
    ];

    return (
        <Card>
            <div>选择：民航总医院 / 多发性硬化专科门诊 / 2023-05-28</div>
            <Row className='mt' gutter={30}>
                <Col span={5}>
                    <div style={{ border: '1px solid #ddd', overflowY: 'scroll' }}>
                        <Tree
                            checkable
                            defaultExpandedKeys={['0-0-0', '0-0-1']}
                            defaultSelectedKeys={['0-0-0', '0-0-1']}
                            defaultCheckedKeys={['0-0-0', '0-0-1']}
                            // onSelect={onSelect}
                            // onCheck={onCheck}
                            treeData={treeData}
                        />
                    </div>
                </Col>
                <Col span={19}>
                    <Space>
                        <Tag color='green'>
                            <div>2023-05-28 周日</div>
                            <div>32 / 57</div>
                        </Tag>
                        <Tag >
                            <div>2023-05-28 周日</div>
                            <div>32 / 57</div>
                        </Tag>
                        <Tag >
                            <div>2023-05-28 周日</div>
                            <div>32 / 57</div>
                        </Tag>

                    </Space>
                    <Pagination className="mt" defaultCurrent={1} total={500} />
                    <Table
                        className="mt"
                        columns={columns}
                    />
                    <Button className='mt'>返回</Button>
                </Col>
            </Row>
        </Card>
    )
}
